import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { DialogBase } from '../dialog-base';
import { OneMapService } from '../one-map.service';
import { DatePipe } from '@angular/common';
import { NzMessageService } from 'ng-zorro-antd';
import { UtilService } from 'src/app/core/util/util.service';

@Component({
  selector: 'app-dialog-intake',
  templateUrl: './dialog-intake.component.html',
  styleUrls: ["../dialog-dam/dialog-dam.component.scss", './dialog-intake.component.scss']
})
export class DialogIntakeComponent extends DialogBase implements OnChanges {
  @Input() data: any;
  tabs: any[] = ["过程线"];
  activeIdx: number = 0;

  values: any[] = [
    {
      key: 'dayW',
      label: '日取水量',
      unit: 'm³'
    },
    {
      key: 'mpQ',
      label: '流量',
      unit: 'm³/s'
    }
  ];
  displayKey: string = 'dayW';
  prcsData: any = {};

  processOpt: any = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765"
        }
      }
    },
    legend: {
      data: ['日取水量'],
      bottom: 10
    },
    xAxis: {
      type: "category",
      data: []
    },
    yAxis: [
      {
        name: "日取水量(m³)",
        type: "value"
      }
    ],
    series: [
      {
        name: "日取水量",
        type: "line",
        smooth: true,
        data: []
      }
    ]
  };
  // 默认时间为最近五天
  // beginDate = new Date(+new Date() - 5 * 24 * 60 * 60 * 1000);

  constructor(
    private mapService: OneMapService,
    public datePipe: DatePipe,
    private util: UtilService
  ) {
    super(datePipe);
  }

  ngOnChanges(): void {
    console.log(this.data);
    this.initData();
  }

  initData() {
    switch (this.activeIdx) {
      case 0:
        this.onQueryProcessList();
        break;
    }
  }

  onSelectChange(e) {
    this.activeIdx = e.index;
    this.initData();
  }

  getProcessListIntake() {
    switch (this.data.layer) {
      case 'db':
      case 'dx':
      case 'gy': // 工业取水口
      case 'ny': // 农业取水口
      case 'sh': // 生活取水口
        return this.mapService.queryQSK({
          // wiuCd: '352671051', // TODO
          wiustCd: this.data.wiust_cd || this.data.buildCode || this.data.wiuCd || this.data.properties.wiust_cd,
          beginTime: this.datePipe.transform(this.beginDate, "yyyy-MM-dd"),
          endTime: this.datePipe.transform(this.endDate, "yyyy-MM-dd")
        });
      case 'gyjc': // 工业取水口
      case 'nyjc': // 农业取水口
      case 'shjc': // 生活取水口
      case 'hhjc': // 生活取水口
        return this.mapService.queryProcessIntake({
          wiuCd: this.data.wiuCd || this.data.wiu_cd || this.data.buildCode || this.data.properties.wiu_cd,
          beginTime: this.datePipe.transform(this.beginDate, "yyyy-MM-dd"),
          endTime: this.datePipe.transform(this.endDate, "yyyy-MM-dd")
        });
    }
  }

  onQueryProcessList() {
    this.getProcessListIntake().subscribe(res => {
      this.prcsData = res || {};
      this.renderChart();
    });
  }

  renderChart() {
    if (this.displayKey == 'dayW') {
      const dayW = this.prcsData["dayW"] || [];
      this.processOptChange = {
        legend: {
          data: ["日取水量"],
          bottom: 10
        },
        xAxis: [
          {
            data: this.getItemValues(dayW, "dt", true)
          }
        ],
        yAxis: [
          {
            name: "日取水量(m³)"
          }
        ],
        series: [
          {
            name: "日取水量",
            data: this.util.getItemValues(dayW, "dayW", true, 2)
          }
        ]
      };
    } else {
      const mpQ = this.prcsData["mpQ"] || [];
      this.processOptChange = {
        legend: {
          data: ["流量"],
          bottom: 10
        },
        xAxis: [
          {
            data: this.getItemValues(mpQ, "tm")
          }
        ],
        yAxis: [
          {
            name: "流量(m³/s)"
          }
        ],
        series: [
          {
            name: "流量",
            data: this.util.getItemValues(mpQ, "mpQ", true, 2)
          }
        ]
      };
    }
  }
}
